<!--搜索组件-->
<template>
  <div class="form-search" v-if="formItem && formItem.length > 0">
    <el-form :model="form" label-width="120px" label-position="right">
      <el-row class="elRowCss">
        <el-col v-for="(item, index) in formItem" :key="index" :span="item.width || 6">
          <el-form-item :key="index" :label="item.label" :prop="item.value" style="width: 100%">
            <!--输入框-->
            <el-input style="width: 100%;" v-if="item.type === 'input'" v-model="form[item.value]" clearable
              :placeholder="item.placeholder || '请输入'" />
            <!-- 选择器 单选 -->
            <el-select style="width: 100%;" v-if="item.type === 'select'" v-model="form[item.value]" clearable
              :placeholder="item.placeholder || '请选择'">
              <el-option v-for="(option, i) in item.children" :key="i" :value="option.value" :label="option.label" />
            </el-select>
            <!--选择器 多选-->
            <el-select style="width: 100%;" v-if="item.type === 'multipleSelect'" v-model="form[item.value]" clearable
              multiple collapse-tags collapse-tags-tooltip :placeholder="item.placeholder || '请选择'">
              <el-option v-for="(option, i) in item.children" :key="i" :value="option.value" :label="option.label" />
            </el-select>
            <!--多选框-->
            <el-checkbox-group style="width: 100%;" v-if="item.type === 'checkboxGroup'" v-model="form[item.value]">
              <el-checkbox v-for="(option, i) in item.children" :key="i" :label="option.value">{{ item.label
                }}</el-checkbox>
            </el-checkbox-group>
            <!--日期选择器 区间-->
            <el-date-picker v-if="item.type === 'datePicker'" v-model="form[item.value]" type="daterange"
              range-separator="至" :disabled-date="disabledDate" value-format="YYYY-MM-DD" start-placeholder="开始日期"
              end-placeholder="结束日期" />
          </el-form-item>
        </el-col>
        <!-- 如果当前行表单项不足4个，则在当前行最后面放置确认取消按钮 -->
        <el-col v-if="formItem.length % 4 !== 0" :span="24 - (formItem.length % 4) * 6">
          <div class="button-list">
            <el-button type="primary" icon="Search" @click="emit('searchForm', form)">查询</el-button>
            <el-button icon="RefreshLeft" @click="clearData">重置</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 如果当前行表单项满足，则另起一行在最后面放置确认取消按钮 -->
      <template v-if="formItem.length % 4 === 0">
        <el-row>
          <el-col :span="24">
            <div class="button-list">
              <el-button type="primary" icon="Search" @click="emit('searchForm', form)">查询</el-button>
              <el-button icon="RefreshLeft" @click="clearData">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </template>
    </el-form>
  </div>
</template>
<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
defineProps({
  formItem: {
    // form查询项
    type: Array,
    default: () => [],
  },
  formData: {
    // form查询数据
    type: Object,
    default: () => { },
  },
});

const emit = defineEmits(["searchForm", "clearForm"]);

const form = reactive(JSON.parse(JSON.stringify(proxy.formData))); // form查询数据

const clearData = () => {
  // 清空搜索栏
  Object.keys(form).map((key) => {
    if (form[key].constructor === String) {
      form[key] = "";
    }
    if (form[key].constructor === Array) {
      form[key] = [];
    }
  });
  emit("clearForm", form);
};
</script>

<style lang="scss" scoped>
.form-search {
  .elRowCss {
    display: flex; //设置布局
    flex-wrap: wrap; //进行换行操作
  }

  .button-list {
    text-align: right;
  }
}
</style>
